<script type="text/x-template" id="config-selector-dialog">
    <el-dialog
            :style="{visibility: isDragging ? 'hidden' : 'unset' }"
            class="cc-db-table-selector"
            title="选择模板"
            :visible.sync="visible"
            :modal="false"
            size="full"
            :before-close="handleClose">
        <avue-crud :option="tableOption"
                   :data="tableData"
                   :table-loading="tableLoading"
                   :page="page"
                   ref="crud"
                   width="290"
                   @search-change="handleSearch"
                   @refresh-change="handleRefresh"
                   @selection-change="handleSelect"
                   @size-change="handleSize"
                   @current-change="handleCurrent"
        >
        </avue-crud>
    </el-dialog>
</script>

<script>
    const configInfoOption = {
        width: '100%',
        height: 'auto',
        labelWidth: '120',
        index: false,
        border: true,
        selection: true,
        expand: false,
        stripe: false,
        page: true,
        menuAlign: 'center',
        align: 'left',
        menu: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        column: [
            {
                label: '自增ID',
                prop: 'id',
                width: '80',
                span: 24,
                search: true,
                visdiplay: false
            },
            {
                label: '模板名称',
                prop: 'configName',
                span: 24,
                search: true,
            },
        ]
    };
    Vue.component('config-selector-dialog', {
        data() {
            return {
                urls: {
                    listConfigTemplate: '/codeGen/listConfigTemplate'
                },
                tableOption: {}, // 表格设置属性
                tableData: [], // 表格的数据
                tablePage: 1,
                tableLoading: false,
                isDragging: false,
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 10 // 每页显示多少条
                },
                searchForm: {} //表单搜索条件
            }
        },
        watch: {},
        template: '#config-selector-dialog',
        methods: {
            handleClose() {
                this.$emit('select-cancel')
            },
            /**
             * 初始分页数据
             */
            fetchData: function () {
                this.tableLoading = true;
                this.ajax(this.urls.listConfigTemplate, {}, function (data) {
                    if (data.code === '0') {
                        this.tableData = data.data.rows
                        this.page.total = data.data.total
                        this.tableLoading = false
                    } else {
                        this.tableData = [];
                        this.tableLoading = false;
                    }
                }.bind(this));
            },
            handleSelect(data) {
                if (!data || data.length == 0) {
                    this.$message('请选择数据')
                }
                this.$emit('select-end', data)
            },
            /**
             * 刷新
             */
            handleRefresh: function () {
                this.tableLoading = true;
                this.ajax(this.urls.listConfigTemplate, {
                    page: 1
                }, function (data) {
                    if (data.code === '0') {
                        this.tableData = data.data.rows
                        this.page = {
                            total: data.data.total,
                            currentPage: 1, // 当前页数
                            pageSize: 10 // 每页显示多少条
                        }
                        this.tableLoading = false
                        this.$message({
                            showClose: true,
                            message: '刷新成功',
                            type: 'success'
                        })
                    } else {
                        this.tableData = [];
                        this.tableLoading = false;
                    }
                }.bind(this));
            }
            ,
            /**
             * 搜索
             * @param tableForm
             */
            handleSearch: function (searchForm) {
                this.searchForm = searchForm;
                this.tableLoading = true;
                var searchParams = this.getSearchParams(searchForm);
                searchParams.page = this.page.currentPage;
                searchParams.rows = this.page.pageSize;
                this.ajax(this.urls.listConfigTemplate, searchParams
                        , function (data) {
                            if (data.code === '0') {
                                this.tableData = data.data.rows
                                this.page.total = data.data.total
                                this.tableLoading = false
                            } else {
                                this.tableData = [];
                                this.tableLoading = false;
                            }
                        }.bind(this));
            },
            handleSize: function (pageSize) {
                this.page.pageSize = pageSize;
                this.handleSearch(this.searchForm);
            },
            handleCurrent: function (currentPage) {
                this.page.currentPage = currentPage;
                this.handleSearch(this.searchForm);
            },
        },
        created() {
            this.tableOption = configInfoOption;
            this.fetchData()
            this.visible = true
        }
    })
</script>